<template>
<div class="form-home">
     <el-form :model="user" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" v-if="submitType < 2">
        <el-form-item label="账号 : " prop="userName">
            <el-input ref="input" placeholder="请输入手机号/邮箱/用户名" v-model="user['userName']" clearable></el-input>
        </el-form-item>
    </el-form>
     <el-form :model="user" :rules="rules" ref="ruleForm" label-width="100px" v-if="submitType == 2">
        <el-form-item label="手机号">
          <span class="phone_code">17746676927</span>
          <span class="phone_xinx" @click="phoneMthods">{{ timeInso ? `${time}s后重新获取`: '获取动态码' }}</span>
        </el-form-item>
        <el-form-item label="动态码" prop="phoneCode">
            <el-input ref="input" placeholder="请输入动态码" v-model="user['phoneCode']" clearable></el-input>
        </el-form-item>
    </el-form>
     <el-form :model="user" :rules="rules" ref="ruleForm" label-width="100px" v-if="submitType == 3">
        <el-form-item label="重置密码" prop="pas">
            <el-input ref="input" placeholder="请输入密码" v-model="user['pas']" clearable></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="paswcopy">
            <el-input ref="input" placeholder="请再次确认密码" v-model="user['paswcopy']" clearable></el-input>
        </el-form-item>
    </el-form>
</div>
</template>

<script>
import { post } from '../api/index'
export default {
  props: {
    type: {
      type: Number,
      default: 0
    },
    submitType: {
    },
    submitClick: {
      type: Boolean
    }
  },
  data () {
    const self = this
    const validatorTelAndMobile = function (rule, value, callback) {
      if (value) {
        self.$emit('success', true)
        rule.message = '按住滑块， 拖动完成上方拼图'
        if (!self.submitType) {
          return callback(new Error())
        }
      } else {
        self.$emit('error', false)
        callback(new Error())
      }
    }
    const validatorTelAndphoneCode = function (rule, value, callback) {
      if (value) {
        self.$emit('success', true)
        callback()
      } else {
        console.log(999, '醋味')
        self.$emit('error', false)
        return callback(new Error())
      }
    }
    const validatorTelAndPassword = function (rule, value, callback) {
      console.log(self.user, 'rule')
      if (self.user.pas === value) {
        callback()
      } else {
        return callback(new Error('两次密码请保持一致'))
      }
    }
    return {
      user: {
        userName: '',
        phoneCode: '',
        pas: '',
        paswcopy: ''
      },
      timeInso: false, // 定时器开启
      time: 60, // 动态码倒计时
      rules: {
        userName: [
          { validator: validatorTelAndMobile, required: true, message: '请输入手机号/邮箱/用户名', trigger: 'blur' }
        ],
        phoneCode: [
          { validator: validatorTelAndphoneCode, required: true, message: '您还未输入动态码', trigger: 'blur' }
        ],
        pas: [
          { required: true, message: '您还未输入密码', trigger: 'blur' },
          { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ],
        paswcopy: [
          { validator: validatorTelAndPassword, required: true, trigger: 'blur' },
          { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    submitClick () {
      this.$refs.ruleForm.validate()
    }
  },
  methods: {
    // 获取动态码
    phoneMthods () {
      const code = parseInt((Math.random() * 9 + 1) * 100000)
      console.log(code, 'code')
      this.timeInso = true
      const Timout = setInterval(() => {
        this.time = --this.time
        if (this.time <= 0) {
          this.timeInso = false
          return clearInterval(Timout)
        }
      }, 1000)
      post('', {
        // 100015972479
        SmsSdkAppid: '100015972479',
        PhoneNumberSet: '17746676927'
        // account: '42985844',
        // password: 'ae2b2460e7729e7cdbca2db6b82626fb',
        // mobile: '17746676927',
        // content: ('您的验证码是：' + code + '。请不要把验证码泄露给其他人。'),
        // format: 'json'
      }).then(res => {
        console.log(res, 'res')
      })
    }
  }
}
</script>

<style lang="less" scoped>
.form-home {
    position: relative;
    // min-height: 100px;
    .phone_code {
      position: absolute;
      left: 9px;
    }
    .phone_xinx {
      float: right;
      width: auto;
      padding: 0 15px;
      *padding: 0;
      margin: 0;
      border-radius: 3px;
      background: #f6f6f6;
      border: 1px solid #ddd;
      color: #666;
      font-size: 14px;
      height: 36px;
      line-height: 36px;
      cursor: pointer;
      float: right;
    }
}
</style>
